<template>
  <div class="dragDialog">
    <el-button class="btn" type="primary" @click="dragDialog" size="mini">打开弹窗</el-button>
    <!-- 弹窗部分 -->
    <!-- v-el-drag-dialog才是拖拽的精髓 -->
    <el-dialog
      v-el-drag-dialog
      title="拖拽弹窗"
      :visible.sync="dragDialogVisible"
      width="30%"
      center>
      <span>这是拖拽弹窗</span>
      <p>需要全局注册 <b>utils/directive/drag.js</b> 文件</p>
      <p>注册完毕后,使用全局指令 <b>v-el-drag-dialog</b> 即可拖拽</p>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dragDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dragDialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data(){
    return {
      dragDialogVisible: false
    }
  },
  methods:{
    dragDialog(){
      this.dragDialogVisible = true
    }
  }
}
</script>

<style lang="scss">
  .dragDialog {
    .el-dialog {
      .el-dialog__header {
        background: #fff;
        .el-dialog__title {
          color: #409eff;
        }
        .el-dialog__headerbtn .el-dialog__close {
          &::before {
            color: #409eff;
          }
        }
      }
      .el-dialog__body {
        color: #a15bf1;
      }
      .el-dialog__footer {
        .dialog-footer {
          .el-button {
            background: #409eff;
            border: 1px solid #409eff;
            color: #fff;
          }
        }
      }
    }
  }
</style>